<template>
  <div id="ranking">
    <van-tabs color="#000" line-width="60px">
      <van-tab title="全部类别">
        <!-- 全部 -->
          <div class="all">
            <div class="one" @click="toShop(item.id,item)" v-for="item in rank_list" :key="item.item_id">
              <!-- 头部信息 -->
              <div class="head">
                <img :src="item.samll_img" alt />
                <span>{{ item.restaurant_name }}</span>
                <b>评分4.7 | 月售301</b>
              </div>
              <!-- 展示区域 -->
              <div class="center">
                <div class="cenleft">
                  <img :src="item.img" alt />
                </div>
                <div class="cenright">
                  <h1>{{ item.name }}</h1>
                  <p>{{ item.description }}</p>
                  <h2>
                    <b>￥</b>
                    {{ item.price }}
                    <span>￥{{ item.original_price }}</span>
                    <van-icon name="add" color="#000" />
                  </h2>
                </div>
              </div>
            </div>
          </div>
      </van-tab>
      <van-tab title="简餐便当">
          <!-- 全部 -->
          <div class="all">
            <div class="one" v-for="item in rank_list" :key="item.item_id">
              <!-- 头部信息 -->
              <div class="head">
                <img :src="item.samll_img" alt />
                <span>{{ item.restaurant_name }}</span>
                <b>评分4.7 | 月售301</b>
              </div>
              <!-- 展示区域 -->
              <div class="center">
                <div class="cenleft">
                  <img :src="item.img" alt />
                </div>
                <div class="cenright">
                  <h1>{{ item.name }}</h1>
                  <p>{{ item.description }}</p>
                  <h2>
                    <b>￥</b>
                    {{ item.price }}
                    <span>￥{{ item.original_price }}</span>
                    <van-icon name="add" color="#000" />
                  </h2>
                </div>
              </div>
            </div>
          </div>
      </van-tab>
      <van-tab title="传统美食">
          <!-- 全部 -->
          <div class="all">
            <div class="one" v-for="item in rank_list" :key="item.item_id">
              <!-- 头部信息 -->
              <div class="head">
                <img :src="item.samll_img" alt />
                <span>{{ item.restaurant_name }}</span>
                <b>评分4.7 | 月售301</b>
              </div>
              <!-- 展示区域 -->
              <div class="center">
                <div class="cenleft">
                  <img :src="item.img" alt />
                </div>
                <div class="cenright">
                  <h1>{{ item.name }}</h1>
                  <p>{{ item.description }}</p>
                  <h2>
                    <b>￥</b>
                    {{ item.price }}
                    <span>￥{{ item.original_price }}</span>
                    <van-icon name="add" color="#000" />
                  </h2>
                </div>
              </div>
            </div>
          </div>
      </van-tab>
      <van-tab title="西式套餐">
          <!-- 全部 -->
          <div class="all">
            <div class="one" v-for="item in rank_list" :key="item.item_id">
              <!-- 头部信息 -->
              <div class="head">
                <img :src="item.samll_img" alt />
                <span>{{ item.restaurant_name }}</span>
                <b>评分4.7 | 月售301</b>
              </div>
              <!-- 展示区域 -->
              <div class="center">
                <div class="cenleft">
                  <img :src="item.img" alt />
                </div>
                <div class="cenright">
                  <h1>{{ item.name }}</h1>
                  <p>{{ item.description }}</p>
                  <h2>
                    <b>￥</b>
                    {{ item.price }}
                    <span>￥{{ item.original_price }}</span>
                    <van-icon name="add" color="#000" />
                  </h2>
                </div>
              </div>
            </div>
          </div>
      </van-tab>
      <van-tab title="港粤风味">
          <!-- 全部 -->
          <div class="all">
            <div class="one" v-for="item in rank_list" :key="item.item_id">
              <!-- 头部信息 -->
              <div class="head">
                <img :src="item.samll_img" alt />
                <span>{{ item.restaurant_name }}</span>
                <b>评分4.7 | 月售301</b>
              </div>
              <!-- 展示区域 -->
              <div class="center">
                <div class="cenleft">
                  <img :src="item.img" alt />
                </div>
                <div class="cenright">
                  <h1>{{ item.name }}</h1>
                  <p>{{ item.description }}</p>
                  <h2>
                    <b>￥</b>
                    {{ item.price }}
                    <span>￥{{ item.original_price }}</span>
                    <van-icon name="add" color="#000" />
                  </h2>
                </div>
              </div>
            </div>
          </div>
      </van-tab>
      <van-tab title="日韩料理">
          <!-- 全部 -->
          <div class="all">
            <div class="one" v-for="item in rank_list" :key="item.item_id">
              <!-- 头部信息 -->
              <div class="head">
                <img :src="item.samll_img" alt />
                <span>{{ item.restaurant_name }}</span>
                <b>评分4.7 | 月售301</b>
              </div>
              <!-- 展示区域 -->
              <div class="center">
                <div class="cenleft">
                  <img :src="item.img" alt />
                </div>
                <div class="cenright">
                  <h1>{{ item.name }}</h1>
                  <p>{{ item.description }}</p>
                  <h2>
                    <b>￥</b>
                    {{ item.price }}
                    <span>￥{{ item.original_price }}</span>
                    <van-icon name="add" color="#000" />
                  </h2>
                </div>
              </div>
            </div>
          </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  methods: {
    toShop(id,item) {
      this.$router.push({name: 'shop',params: {id},query: item})
    }
  },
  created() {
    this.$bus.$emit('footernav',false)
  },
  beforeDestroy() {
    this.$bus.$emit('footernav',true)
  },
  computed: {
    ...mapState(["rank_list"]),
  },
  async mounted() {
    let url = "http://localhost:8080/data/ranking.json";
    let res = await this.$axios.get(url);
    this.$store.dispatch("ranking", res.data);
  },
};
</script>

<style lang="less" scoped>
#ranking {
  .all {
    padding: 10px;
    .one {
      height: 200px;
      border-bottom: 1px solid #ccc;
      .head {
        height: 62px;
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        img {
          width: 38px;
          height: 38px;
        }
        span {
          font-size: 4vw;
          line-height: 2.5;
          color: #666;
          max-width: 56vw;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin-right: 80px;
        }
        b {
          font-size: 2.66667vw;
          line-height: 3.5;
          color: #aaa;
          font-weight: normal;
        }
      }
      .center {
        height: 130px;
        // background-color: green;
        display: flex;
        justify-content: space-between;
        .cenleft {
          width: 107px;
          height: 107px;
          img {
            width: 100%;
          }
        }
        .cenright {
          width: 61.86667vw;
          margin-left: 2.66667vw;
          h1 {
            font-size: 4.53333vw;
            line-height: 1.2;
            color: #333;
            font-weight: 700;
          }
          p {
            margin-top: 1.33333vw;
            font-size: 2.93333vw;
            height: 7.4vw;
            line-height: 1.4;
            color: #999;
            overflow: hidden;
          }
          h2 {
            bottom: 0;
            font-size: 5.33333vw;
            color: #b91f20;
            font-family: CSD;
            font-weight: 700;
            margin-top: 20px;
            b {
              font-size: 3.73333vw;
            }
            span {
              font-size: 3.73333vw;
              font-weight: 300;
              margin-left: 1.33333vw;
              color: #666;
              text-decoration: line-through;
            }
            .van-icon {
              margin-left: 80px;
            }
          }
        }
      }
    }
  }
}
</style>